<template>
      <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="#"/>
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="mobile" label="电话" />
            <el-table-column prop="role_name" label="角色" />
            <el-table-column label="状态" >
                <template #default = "scope">
                    <el-switch
                        @change="change(scope.row)"
                        v-model="scope.row.mg_state"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
            <template #default = "scope">
                <el-button type="primary" @click="open(scope.row)" :icon="Edit" circle />
                 <el-button type="danger" @click="del(scope.row)" :icon="Delete" circle />
                 <el-button type="warning" :icon="Setting" circle />
            </template>
            </el-table-column>
        </el-table>

</template>
<script setup>
import { defineProps,defineEmits } from 'vue'
import { Search,Edit,Delete,Setting } from '@element-plus/icons-vue'

const props = defineProps({
    tableData:Array,
})
const emit = defineEmits(['change','del','open']);
const del =(row)=>{
    emit('del',row)
}
const change = (row)=>{
    emit('change',row)
}
const open = (row)=>{
    emit('open',row);
}


</script>
<style lang="scss" scoped>
    
</style>